<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请选择源表</title>
    <link rel="shortcut icon" th:href="@{favicon.ico}">
    <link th:href="@{zui.css}" rel="stylesheet">
</head>
<body>
<input type="hidden" id="token" th:value="${token}"/>
<table class="table table-hover">
    <thead>
    <tr>
        <th>Name</th>
        <th>Remarks</th>
        <th>选择</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="tableIns:${tables}">
        <td th:text="*{tableIns.name}"></td>
        <td th:text="*{tableIns.remarks}"></td>
        <td>
            <label class="checkbox">
                <input type="checkbox" th:id="*{tableIns.name}" th:value="*{tableIns.name}">
            </label>
        </td>
    </tr>
    </tbody>
</table>

<button type="button" class="btn primary" id="submit" onclick="javascript:submitTableSelected();">提交</button>


</body>
<script th:src="@{jquery.js}"></script>
<script type="text/javascript">
    function submitTableSelected() {
         let token = $("#token").val();
         let tables ="";
         $('input[type="checkbox"]:checked').each(function(){
             tables = tables + "," +$(this).val();
         });

         $.ajax({
             url: "/step4",
             method: "POST",
             dataType: "json",
             data: {
                 token: token,
                 tables: tables
             },
             success: function (resp) {
                 document.location.href = "/step4;
             }
         });
     }
</script>
</html>